<template>
  
  <el-menu
  :default-active="activeIndex"
  class="el-menu-demo bg_safe"
  mode="horizontal"
  @select="handleSelect"
>
  <img src="//consumer-res.huawei.com/etc/designs/huawei-cbg-site/clientlib-campaign-v4/common-v4/images/logo.svg" 
  alt="" 
  class="a"
  @click="zhu"
  >
  <el-menu-item index="1" @click="mobile">手机</el-menu-item>
  <el-menu-item index="2" @click="computer">电脑</el-menu-item>
  <el-menu-item index="3">平板</el-menu-item>
  <el-menu-item index="4">智慧屏</el-menu-item>
  <el-menu-item index="5">穿戴</el-menu-item>
  <el-menu-item index="6">耳机音箱</el-menu-item>
  <el-menu-item index="7">全屋智能</el-menu-item>
  <el-menu-item index="8">更多产品</el-menu-item>
  <el-menu-item index="9">HarmonyOS 2</el-menu-item>

      <el-menu-item index="10" class="y" @click="fw">服务支持</el-menu-item>
    <el-menu-item index="11" >零售店</el-menu-item>
    <el-menu-item index="9" >商用</el-menu-item>
     <div class="size-icon">
 <search style="width: 1em; height: 1em; margin-right: 8px;"/>
 
<el-dropdown >
    <span class="size-2">
        <user style="width: 1em; height: 1em; margin-right: 8px;"/>

      <el-icon class="el-icon--user">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
          <h2 v-if="token">登录</h2>
        <h2 v-else>未登录</h2>
        <el-dropdown-item @click="login">登录</el-dropdown-item>
        <el-dropdown-item @click="register">注册</el-dropdown-item>
         <el-dropdown-item @click="loginout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

    </div>
    <el-row>
  <el-button round class="button-size">华为商城</el-button>
   </el-row>

</el-menu>



</template>

<script >
import {Search,User} from '@element-plus/icons-vue';
//图标名称要大写，要使用驼峰命名法
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        token:"",
      }
    },
    methods: {
      loginout(){
                this.token="";
                localStorage.token="";
            },
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      },
      mobile(){
             this.$router.push({name:'mobile'})
        },
       computer(){
             this.$router.push({name:'computer'})
        },
        login(){
           this.$router.push({name:'login'})
            this.token="lijiyang";
                localStorage.token="lijiyang";
        },
        register(){
           this.$router.push({name:'register'})
        },
        zhu(){
           this.$router.push({name:'yemian'})
        },
        fw(){
           this.$router.push({name:'fw'})
        }
    },
     mounted() {
            this.token=localStorage.token;
        },
     components:{
     Search,
     User,
      //注册图标组件名称
  },
  }
</script>
<style lang="scss" scoped>
.a{
   width:120px;
    height: 20px;
    padding-top: 18px;
   

}
.el-menu-item{
    color: #000;
}
.y{
    margin-left: 140px;
}
.size-icon{
font-size: 20px;
padding-top: 15px;
margin-left: 15px;
height: 30px;
}
.el-row{
    margin-left: 15px;
    padding-top: 15px;
}
.size-2{
font-size: 20px;
padding-top: 15px;
margin-left: 9px;
height: 30px;
}


</style>